<template>
  <div id="echarts1"></div>
</template>
<script>
export default {
  data() {
    return {}
  },
  props: {
    data: {
      type: Array,
      default: () => {
        return []
      },
    },
  },

  mounted() {
    this.showEcharts1()
  },
  created() {},
  methods: {
    showEcharts1() {
      // 象形柱图
      let myChart = this.$echarts.init(document.getElementById('echarts1'))
      let list = this.data
      let yName = list.map((item) => item.stree)
      let xData = list.map((item) => item.num)
      let barWidth = 18
      let option = {
        xAxis: {
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
        },
        tooltip: {
          trigger: 'item',
          formatter: function (p) {
            return p.name + '<br/>' + p.value // + '起'
          },
          textStyle: {
            fontSize: 14,
            color: '#333',
          },
        },
        grid: {
          containLabel: true,
          top: '1%',
          left: '4%',
          right: '15%',
          bottom: '3%',
        },
        yAxis: [
          {
            inverse: true,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                fontSize: 12,
                color: '#fff',
              },
            },
            data: yName,
          },
        ],
        series: [
          {
            //内
            type: 'bar',
            barWidth,
            legendHoverLink: false,
            symbolRepeat: true,
            silent: true,
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: '#01F4C3', // 0% 处的颜色 每各小格格
                  },
                  {
                    offset: 1,
                    color: '#01F4C3', // 100% 处的颜色
                  },
                ],
              },
            },
            data: list,
            z: 1,
            animationEasing: 'elasticOut',
          },
          {
            // 背景
            type: 'pictorialBar',
            animationDuration: 0,
            symbolRepeat: 'fixed',
            symbolMargin: 2,
            symbol: 'roundRect',
            symbolSize: [6, barWidth],
            itemStyle: {
              normal: {
                color: 'rgba(0, 0, 0, 0.1)',
              },
            },
            label: {
              normal: {
                show: true,
                position: 'right',
                offset: [0, 2],
                distance: 30,
                textStyle: {
                  color: '#fff',
                  fontSize: 14,
                },
                formatter: function (a, b) {
                  return `${a.value}`
                },
              },
            },
            data: xData,
            z: 0,
            animationEasing: 'elasticOut',
          },
          {
            //分隔
            type: 'pictorialBar',
            itemStyle: {
              color: '#000',
            },
            symbolRepeat: 'fixed',
            symbolMargin: 2,
            symbol: 'roundRect',
            symbolClip: true,
            symbolSize: [2, barWidth],
            symbolPosition: 'start',
            symbolOffset: [0, 0],
            data: list,
            z: 2,
            animationEasing: 'elasticOut',
          },
        ],
      }
      myChart.setOption(option)
    },
  },
}
</script>
